<template>
  <div id="app" class="app">
    <div class="app-nav">
      <div v-for="(item, index) in routes" :key="index" class="app-nav__item">
        <router-link :to="item.path">{{ item.name }}</router-link>
      </div>
    </div>
    <div class="app-view">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import routes from "./router/routes";
export default {
  name: "App",
  data() {
    return {
      routes
    };
  },
  components: {}
};
</script>
<style lang="less" scoped>
.app {
  height: 100%;
  display: flex;
}
.app-nav {
  height: 100%;
  width: 350px;
  overflow: auto;
  border-right: 1px solid #ddd;
}
.app-view {
  padding: 16px;
  flex: 1;
  overflow: auto;
}
.app-nav__item {
  line-height: 32px;
  padding: 0 16px;
}
</style>
<style>
html,
body {
  height: 100%;
}
* {
  padding: 0;
  margin: 0;
}
</style>
